<template>
  <div>
      <!-- 顶部滑动条区域 -->
    <div id="slider" class="mui-slider">
			<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
				<div class="mui-scroll">
					<a :class="['mui-control-item',item.id == 1  ? ' mui-active':'']" v-for="item in cates" 
								:key="item.id" @tap="getPhotoListByCateId(item.id)">
						{{item.title}}
					</a>
				</div>
			</div>
		</div>
		<!-- 图片列表区域 -->
		<ul class="phote-list">
			<router-link tag="li" v-for="(item,index) in list" :key="item._id" :to="'/home/photoinfo/' + (index+1)">
				<img v-lazy="item.url"/>
				<div class="info">
					<h1 class="info-title">欧式风格继承了巴洛克中豪华、动感、多变的视觉效果</h1>
					<div class="info-body">继上编欧式客厅装修效果图之后，今天，小编为大家带来的是
						一组不同类型的欧式卧室装修效果图。欧式卧室的设计风格按
					</div>
				</div>
			</router-link>
		</ul>
  </div>
</template>
<script>
// 1.导入 mui 的 js 文件
import mui from '../../lib/mui/js/mui.min.js'

export default {
  data(){
    return{
			cates:[],//所有分类的列表数据
			list:[], // 图片列表的数组
    }
  },
  mounted(){ //当组件中的DOM结构被渲染好并放到页面中后，会执行这个钩子函数
    //如果要操作元素了，最好在mouted里面，
    // 2 初始化滑动控件
    mui('.mui-scroll-wrapper').scroll({
      deceleration: 0.0005 // flick减速系数，系数越大，滚动速度越慢，滚动距离越小，默认 0.0006
    })
	},
	created(){
		this.getAllCategory()
		this.getPhotoListByCateId('1')
	},
  methods:{
		getAllCategory(){
			//console.log('getdata')
			var data = require('../../data/imgcategory.json')
			//console.log(data)
			var message = data.message
			// /message.unshift({title: '全部',id:'1'})
			this.cates = message
			//console.log(this.cates)
			//获取所有的图片分类
			/*
			this.$http.get('api/getimgcategory')
			.then(result=>{
				if(result.body.status == 0){
					//手动拼接出一个最完整的分类列表
					result.body.message.unshift({title: '全部',id:'0'})
					this.cates = result.body.message
				}	
			})
			*/
		},
		getPhotoListByCateId(id){
			console.log('id',id)
			//根据分类ID获取图片列表
			this.$http.get('https://gank.io/api/data/福利/12/'+id)
			.then(result=>{
				console.log('result',result.body)
				this.list = result.body.results
				mui('.mui-scroll-wrapper').scroll({
					deceleration: 0.0005 // flick减速系数，系数越大，滚动速度越慢，滚动距离越小，默认 0.0006
				})
			})
		}
  }
}
</script>
<style lang="scss" scoped>
 *{
   touch-action: pan-y;//去除滑动时候的警告
 }
 .phote-list{
	 list-style:none;
	 margin:0;
	 padding:10px;
	 li{
		 	background-color:#ccc;
		 	text-align: center;
			margin-bottom:10px;
			box-shadow: 0 0 9px #999;
			position: relative;
		 img{
			 width:100%;
			 vertical-align: middle;
		 }
		 img[lazy="loading"]{
			width:40px;
			height:300px;
			margin: auto;
		}
		.info{
				color:white;
				text-align: left;
				position: absolute;
				bottom:0;
				background-color: rgba(0,0,0,0.4);
				max-height: 84px;
				font-family: 'Microsoft YaHei';
				.info-title{
					font-size:14px;
				}
				.info-body{
					font-size:13px;
				}
			}
	 	}
 }
 
</style>


